<template>
  <div class="main">
    <div class="inner">
      <el-row :gutter="30">
        <el-col :md="10" :xs="24">
          <div class="leftCont wow slideInLeft">
            <div class="head">
              <h1 class="fs-28">{{ $t('ismsg.howToBuy.title') }}</h1>
              <h2 class="fs-36">{{ $t('ismsg.title') }}</h2>
              <p class="text fs-12">{{ $t('ismsg.howToBuy.text') }}</p>
            </div>
            <div class="btn">
              <img src="@/assets/images/stakeLogo.png" alt="" />
              <a
                :href="`https://pancakeswap.finance/swap?inputCurrency=${mainStore.baseData?.contractUsdt}&outputCurrency=${mainStore.baseData?.axieContractAddress}`"
                target="_blank"
                rel="noopener noreferrer">
                <span class="fs-18"> {{ $t('ismsg.howToBuy.btn') }}</span>
              </a>
              <i class="iconfont icon-jiantou_youshang_o"></i>
            </div>
          </div>
        </el-col>
        <el-col :md="14" :xs="24">
          <div class="rightCont wow slideInRight">
            <div class="item" v-for="(item, index) in list" :key="index">
              <div class="Img">
                <img :src="item.path" alt="" />
              </div>
              <div class="itemText">
                <h1 class="title fs-14">{{ $t(item.title) }}</h1>
                <p class="text fs-12">{{ $t(item.text) }}</p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, watchEffect } from 'vue';
import { useMainStore } from '@/store/index';

const mainStore = useMainStore();

const getImageUrl = (name: string) => {
  return new URL(`/src/assets/images/${name}.png`, import.meta.url).href;
};
const list = [
  {
    title: 'ismsg.howToBuy.list[0].title',
    text: 'ismsg.howToBuy.list[0].text',
    path: getImageUrl('buyAvater2')
  },
  {
    title: 'ismsg.howToBuy.list[1].title',
    text: 'ismsg.howToBuy.list[1].text',
    path: getImageUrl('buyAvater1')
  },
  {
    title: 'ismsg.howToBuy.list[2].title',
    text: 'ismsg.howToBuy.list[2].text',
    path: getImageUrl('buyAvater3')
  }
];
</script>

<style lang="scss" scoped>
.main {
  padding-bottom: 8vh;
  position: relative;
  background: linear-gradient(
    rgb(67, 39, 51) 0%,
    rgb(56, 37, 50) 5%,
    rgb(44, 34, 56) 11.88%,
    rgb(33, 31, 61) 22.15%,
    rgb(7, 25, 75) 100%
  );
}

.inner {
  width: 80%;
  padding: 5% 3%;
  margin: 0 auto;
  background: url('@/assets/images/whiteBg.png') no-repeat left top;
  background-size: 100% 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 9;

  .leftCont {
    width: 100%;
    padding-top: 4vh;
    margin: 0 auto;

    .head {
      font-weight: 700;

      h1 {
        font-size: 40px;
        font-family: MFBanHei_Noncommercial-Regular;
        background-image: linear-gradient(to bottom, #f99b36, #f35845);
        -webkit-background-clip: text;
        color: transparent;
      }

      h2 {
        font-size: 63px;
        font-family: MFBanHei_Noncommercial-Regular;
        background-image: linear-gradient(to bottom, #11bad3, #4da7f7);
        -webkit-background-clip: text;
        color: transparent;
        margin: 1vh 0;
      }

      .text {
        font-size: 22px;
        color: #572815;
      }
    }

    .btn {
      width: 300px;
      height: 60px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 5vh;
      font-weight: 600;
      background-color: #ffffff;
      box-shadow: 0px 3px 16px 0px rgba(116, 55, 46, 0.11);
      border-radius: 20px;
      cursor: pointer;

      img {
        width: 42px;
      }

      span {
        padding: 0 1vw;
        color: #572815;
        font-size: 22px;
        font-family: MFBanHei_Noncommercial-Regular;
      }
      i {
        font-size: 20px;
      }
    }
  }

  .rightCont {
    width: 100%;
    margin: 0 auto;

    .item {
      width: 100%;
      // height: 158px;
      padding: 20px 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-bottom: thin solid rgba(3, 0, 0, 0.15);

      .Img {
        width: 90px;

        img {
          width: 100%;
        }
      }

      .itemText {
        flex: 1;
        margin-left: 5%;

        .title {
          font-size: 20px;
          color: #572815;
          font-weight: 600;
          line-height: 26px;
          white-space: break-spaces;
        }

        .text {
          color: #572815;
          font-size: 18px;
          line-height: 24px;
        }
      }

      &:last-of-type {
        border-bottom: none;
      }
    }
  }
}

@media screen and (max-width: 992px) {
  .btn {
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  .phoneImg {
    display: block !important;
  }

  .inner {
    width: 90%;
    border-radius: 20px;
    overflow: hidden;

    .leftCont {
      padding-top: 0;

      .head {
        h1 {
          text-align: center;
        }

        h2 {
          text-align: center;
          font-size: 42px;
        }
      }

      .Img,
      .Img2 {
        img {
          width: 80%;
        }
      }
    }
  }
}

@media screen and (max-width: 500px) {
  .main {
    padding-bottom: 5vh;
  }

  .inner {
    .leftCont {
      .btn {
        height: 40px;
        margin-top: 2vh;

        img {
          width: 30px;
        }
      }
    }

    .rightCont {
      margin-top: 2vh !important;

      .item {
        padding: 8px 0;

        .Img {
          width: 64px;
        }

        .itemText .text {
          line-height: normal;
        }
      }
    }
  }
}
</style>
